<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
    .class1 {
        background: #444;
        color: #eee;
    }
</style>
<body>

<div id="app">
    <label for="r1">修改颜色</label>
    <input type="checkbox" v-model="use" id="r1">
    <br><br>
    <div v-bind:class="{'class1': use}">
        v-bind:class 指令
    </div>
</div>
<!--
属性

HTML 属性中的值应使用 v-bind 指令。
-->
<script>
    new Vue({
        el: '#app',
        data: {
            use: false
        }
    });
</script>
</body>